
<template>
  <div>
    <el-row :gutter="30">
      <el-col :span="3"
        ><div class="grid-content bg-purple">&emsp;</div></el-col
      >
      <el-col :span="18">
        <el-form :model="userinfo" label-width="80px">
          <el-tabs type="border-card">
            <el-tab-pane>
              <span slot="label"><i class="el-icon-date"></i>基础信息</span>
              <el-form-item label="真实姓名">
                <el-input v-model="userinfo.userinfoRealname"></el-input>
              </el-form-item>
              <el-form-item label="手机号码">
                <el-input v-model="userinfo.userinfoTel"></el-input>
              </el-form-item>
              <el-form-item label="身份证号">
                <el-input v-model="userinfo.userinfoCardNo"></el-input>
              </el-form-item>
              <el-form-item label="婚姻状况">
                <el-input v-model="userinfo.userinfoMaritaStatus"></el-input>
              </el-form-item>
              <el-form-item label="现住地址">
                <el-input v-model="userinfo.userinfoDetailedAddress"></el-input>
              </el-form-item>
              <el-form-item label="详细住址">
                <el-input
                  v-model="userinfo.userinfoCurrentResidence"
                ></el-input>
              </el-form-item>
              <el-form-item label="最高学历">
                <el-input v-model="userinfo.userinfoDegree"></el-input>
              </el-form-item>
              <el-form-item label="月收入">
                <el-input v-model="userinfo.userinfoIncome"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="户籍及联系人信息">
              <el-form-item label="籍贯信息">
                <el-input v-model="userinfo.userinfoNativePlace"></el-input>
              </el-form-item>
              <el-form-item label="亲属姓名">
                <el-input
                  v-model="userinfo.userinfoImmediateRelative"
                ></el-input>
              </el-form-item>
              <el-form-item label="亲属关系">
                <el-input v-model="userinfo.userinfoRelationship"></el-input>
              </el-form-item>
              <el-form-item label="亲属联系方式">
                <el-input
                  v-model="userinfo.userinfoRelationshipPhone"
                ></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="工作信息">
              <el-form-item label="公司姓名">
                <el-input v-model="userinfo.companyName"></el-input>
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="userinfo.companyAddress"></el-input>
              </el-form-item>
              <el-form-item label="详细地址">
                <el-input v-model="userinfo.companyDetailedAddress"></el-input>
              </el-form-item>
              <el-form-item label="公司性质">
                <el-input v-model="userinfo.companyNature"></el-input>
              </el-form-item>

              <el-form-item label="公司行业">
                <el-input v-model="userinfo.companyIndustry"></el-input>
              </el-form-item>

              <el-form-item label="联系方式">
                <el-input v-model="userinfo.companyTel"></el-input>
              </el-form-item>

              <el-form-item label="入职时长">
                <el-input v-model="userinfo.userinfoEntryTime"></el-input>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="身份证照片">
              <el-form-item label="身份证正面照">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="点击添加或修改图片"
                  placement="right"
                >
                  <div class="block" @click="uploadSFZ('身份证正面照')">
                    <el-image
                      :src="userinfo.userinfoFrontPhoto"
                      style="width: 600px; height: 280px"
                    >
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </div>
                </el-tooltip>
              </el-form-item>

              <el-form-item label="身份证反面照">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="点击添加或修改图片"
                  placement="right"
                >
                  <div class="block" @click="uploadSFZ('身份证反面照')">
                    <el-image
                      :src="userinfo.userinfoReversePhoto"
                      style="width: 600px; height: 280px"
                    >
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </div>
                </el-tooltip>
              </el-form-item>


              <el-form-item label="手持身份证正面照">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="点击添加或修改图片"
                  placement="right"
                >
                  <div class="block" @click="uploadSFZ('手持身份证正面照')">
                    <el-image
                      :src="userinfo.holdFrontPhoto"
                      style="width: 600px; height: 280px"
                    >
                      <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                      </div>
                    </el-image>
                  </div>
                </el-tooltip>
              </el-form-item>

              
            </el-tab-pane>
          </el-tabs>

          <el-form-item>
            <el-button type="primary" @click="onSubmit">保存</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-col>

      <el-col :span="3"><div class="grid-content bg-purple"></div></el-col>
    </el-row>

    <el-dialog :title="titleWord" :visible.sync="dialogFlag" width="30%" center>
      <el-row>
        <el-col :span="7"
          ><div class="grid-content bg-purple-dark">&emsp;</div></el-col
        >
        <el-col :span="10"
          ><el-upload
            class="avatar-uploader"
            action="http://localhost:8080/uploadoss"
            name="file"
            :show-file-list="false"
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          >
            <img v-if="imageUrl" :src="src" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload
        ></el-col>
        <el-col :span="7"
          ><div class="grid-content bg-purple-dark"></div
        ></el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="dialogFlag = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {},
      userinfo: {},
      dialogFlag: false,
      titleWord: "",
      src: "",
      imageUrl:""
    };
  },
  methods: {
    onSubmit() {
      this.$axios.put("/userinfo/updateUserinfo",this.userinfo).then(res=>{
        if(res.data.code == 200) {
          this.$message.success("提交成功");
        }
      });



    },
    handleSuccess(res, file) {
      this.dialogFlag = false;
      if (res.code == 200) {
        // this.imageUrl = res.message;
        switch (this.titleWord) {
          case "上传身份证正面照":
            this.userinfo.userinfoFrontPhoto = res.message;
            break;
          case "上传身份证反面照":
            this.userinfo.userinfoReversePhoto = res.message;
            break;
          case "上传手持身份证正面照":
            this.userinfo.holdFrontPhoto = res.message;
            break;
        }
       
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },

    uploadSFZ(title) {
      this.dialogFlag = true;
      this.titleWord = "上传" + title;
      this.imageUrl = false;
      switch (this.titleWord) {
          case "上传身份证正面照":
            if (this.userinfo.userinfoFrontPhoto != null) {
              // alert("111");
              this.imageUrl = true;
              
            }
            this.src = this.userinfo.userinfoFrontPhoto;
            break;
          case "上传身份证反面照":
            if (this.userinfo.userinfoReversePhoto != null) {
              // alert("222");
              this.imageUrl = true;
              
            }
            this.src = this.userinfo.userinfoReversePhoto;
            break;
          case "上传手持身份证正面照":
            if (this.userinfo.holdFrontPhoto != null) {
              // alert("333");
              this.imageUrl = true;
              
            }
            this.src = this.userinfo.holdFrontPhoto;
            break;
        }
    },
    loadUserinfo() {
      
      this.$axios
        .post("userinfo/selectByUser", {
          tel: this.user.userTel,
        })
        .then((res) => {
          this.userinfo = res.data.data.userinfo;
        });
        
    },
  },
  mounted() {
    this.user = JSON.parse(sessionStorage.getItem("user"));
    this.loadUserinfo();
  },
};
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

"userinfo": {
			"userinfoId": 2,
			"userId": null,
			"userinfoRealname": "孟建辉",
			"userinfoTel": "17018736528",
			"userinfoCardNo": null,
			"": null,
			